<template>
  <div class="app-container preWorkBox">
    <MaskLayer :centerDialogVisible="visible"></MaskLayer>
    <!-- 上料防错 -->
    <StepsItem :changeObj="changeObj"></StepsItem>
    <div class="content">
      <div class="btnDiv">
        <el-button
          :type="this.btnIndex == '8' ? 'primary' :'info'"
          @click="btnChange('8')"
          style="font-size: 24px;"
        >安规测试</el-button>
        <el-button
          :type="this.btnIndex == '9' ? 'primary' :'info'"
          @click="btnChange('9')"
          style="font-size: 24px;"
        >灌流测试</el-button>
        <el-button
          :type="this.btnIndex == '10' ? 'primary' :'info'"
          @click="btnChange('10')"
          style="font-size: 24px;"
        >老化信息</el-button>
        <el-button
          :type="this.btnIndex == '11' ? 'primary' :'info'"
          @click="btnChange('11')"
          style="font-size: 24px;"
        >调试信息</el-button>
      </div>
      <RegulationsResults v-if="this.btnIndex== '8'" :formObj="formObj"></RegulationsResults>
      <PerfusionResult v-if="this.btnIndex== '9'" :formObj="formObj"></PerfusionResult>
      <AgingInformation v-if="this.btnIndex== '10'" :formObj="formObj"></AgingInformation>
      <ModeInformation v-if="this.btnIndex== '11'" :formObj="formObj"></ModeInformation>
    </div>
  </div>
</template>
    
<script>
import { listWorkorder } from "@/api/apppro/index";
// 头部公共部分
import StepsItem from "../components/stepsItem.vue";
import SnYard from "../components/snYard.vue";
import Abnormal from "../components/abnormal.vue";
import SopShow from "../components/sopShow.vue";
import Stripping from "../components/stripping.vue";
import ThreeYards from "../components/threeYards.vue";
import SelfInspection from "../components/selfInspection.vue";
import ChangeBinding from "../components/changeBinding.vue";
import MaskLayer from "../components/maskLayer.vue";
import RegulationsResults from "../components/regulationsResults.vue";
import PerfusionResult from "../components/perfusionResult.vue";
import AgingInformation from "../components/agingInformation.vue";
import ModeInformation from "../components/modeInformation.vue";
export default {
  name: "keyBingding",
  components: {
    StepsItem,
    SnYard,
    Abnormal,
    SopShow,
    ThreeYards,
    Stripping,
    SelfInspection,
    ChangeBinding,
    MaskLayer,
    RegulationsResults,
    PerfusionResult,
    AgingInformation,
    ModeInformation,
  },
  data() {
    return {
      time: null, // 定时器
      btnIndex: "8",
      form: {},
      visible:false,
      loading: false,
      formObj: {},
      rules: {
        itemCode: [
          { required: true, message: "物料/产品编码不能为空", trigger: "blur" },
          {
            max: 64,
            message: "物料/产品编码长度必须小于64个字符",
            trigger: "blur"
          }
        ]
      }
    };
  },

  created() {
    clearInterval(this.timer);
    // this.getCode();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    statusfun(index) {
      return "process";
    },
    submitForm() {},
    changeObj(obj) {
      this.formObj = obj;
      this.settimeFun();
      this.timer = setInterval(() => {
        this.settimeFun();
      }, 30 * 1000);
    },
    // 产线停产接口函数
    settimeFun() {
      let workorderId = this.formObj.workorderId;
      console.log(workorderId, "====workorderId====");
      listWorkorder({ workorderId }).then(res => {
        let list = res.rows || []
        if(list.length>0){
          this.visible =  list[0].runStatus== '1' ? true : false
        }
        // runStatus  1  是停产
        console.log(res, "==========res===========");
      });
    },
    reset() {
      this.form = {
        resource: undefined,
        resource1: undefined,
        resource2: undefined,
        resource3: undefined
      };
      // this.autoGenFlag = false;
      this.resetForm("form");
    },
    btnChange(type) {
      this.btnIndex = type;
    }
  }
};
</script>
    
<style rel="stylesheet/scss" lang="scss" scoped>
.preWorkBox ::v-deep .el-icon-check::before {
  // display: none !important;
  content: "";
}

.perForm ::v-deep .el-form-item__label {
  font-size: 28px;
}

.perForm ::v-deep .el-radio__label {
  font-size: 18px;
}

.content {
  margin-top: 20px;
  // text-align: center;
  display: flex;

  justify-content: center;
  .btnDiv {
    position: absolute;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;

    button {
      margin: 15px 0;
    }
  }
}

.dialog_footer {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  // display: flex;
  // justify-content: center;
}
.sn_box {
  text-align: left;
  margin-left: 10%;
  font-size: 20px;
  line-height: 40px;
}
</style>
    